<template>
  <div>

    <div id="m-line" style="width: 1100px;height:400px;"></div>
  </div>
</template>

<script>
  import {getK} from '@/api/modules/ticker'
  import * as echarts from 'echarts';
  import $ from 'jquery';

  export default {
    name: "DealMainRight",
    data() {
      return {
        currency: "BTC-USDT",
        type: '1day'
      }
    },
    mounted() {
      this.getK()
    },
    methods: {
      getK() {
        let data = {"code": this.currency, "type": this.type}
        getK(data).then(res => {
          console.log("key线图", res)
          this.getInfo(res.data)
          this.loading = false
        })
      },
      getInfo(mData) {

        var ROOT_PATH =
          'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var chartDom = document.getElementById('m-line');
        var myChart = echarts.init(chartDom);
        var option;

        const upColor = '#00da3c';
        const downColor = '#ec0000';

        function splitData(rawData) {
          let categoryData = [];
          let values = [];
          let volumes = [];
          for (let i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i]);
            // volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
          }
          return {
            categoryData: categoryData,
            values: values,
            // volumes: volumes
          };
        }

        // function calculateMA(dayCount, data) {
        //   debugger
        //   var result = [];
        //   for (var i = 0, len = data.values.length; i < len; i++) {
        //     if (i < dayCount) {
        //       result.push('-');
        //       continue;
        //     }
        //     var sum = 0;
        //     for (var j = 0; j < dayCount; j++) {
        //       sum += data.values[i - j][1];
        //     }
        //     result.push(+(sum / dayCount).toFixed(3));
        //   }
        //   return result;
        // }

        $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
          var data = splitData(mData);
          // var data = splitData(rawData);
          myChart.setOption(
            (option = {
              animation: false,
              // legend: {
              //   bottom: 10,
              //   left: 'center',
              //   data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
              // },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'line'
                },
                borderWidth: 1,
                // borderColor: 'white',
                padding: 10,
                // textStyle: {
                //   color: '#777'
                // },
                position: function (pos, params, el, elRect, size) {
                  const obj = {
                    top: 10
                  };
                  obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                  return obj;
                }
                // extraCssText: 'width: 170px'
              },
              // axisPointer: {
              //   link: [
              //     {
              //       xAxisIndex: 'all'
              //     }
              //   ],
              //   label: {
              //     backgroundColor: '#777'
              //   }
              // },
              // toolbox: {
              //   feature: {
              //     dataZoom: {
              //       yAxisIndex: false
              //     },
              //     brush: {
              //       type: ['lineX', 'clear']
              //     }
              //   }
              // },
              // brush: {
              //   xAxisIndex: 'all',
              //   brushLink: 'all',
              //   outOfBrush: {
              //     colorAlpha: 0.1
              //   }
              // },
              visualMap: {
                show: false,
                seriesIndex: 5,
                dimension: 2,
                pieces: [
                  {
                    value: 1,
                    color: downColor
                  },
                  {
                    value: -1,
                    color: upColor
                  }
                ]
              },
              grid: [
                {
                  left: '10%',
                  right: '8%',
                  height: '50%'
                },
                {
                  left: '10%',
                  right: '8%',
                  top: '63%',
                  height: '16%'
                }
              ],
              xAxis: [
                {
                  type: 'category',
                  data: data.categoryData,
                  boundaryGap: false,
                  axisLine: {onZero: false},
                  splitLine: {show: false},
                  min: 'dataMin',
                  max: 'dataMax',
                  axisPointer: {
                    z: 100
                  }
                },
                {
                  type: 'category',
                  gridIndex: 1,
                  data: data.categoryData,
                  boundaryGap: false,
                  axisLine: {onZero: false},
                  axisTick: {show: false},
                  splitLine: {show: false},
                  axisLabel: {show: false},
                  min: 'dataMin',
                  max: 'dataMax'
                }
              ],
              yAxis: [
                {
                  scale: true,
                  splitArea: {
                    show: true
                  }
                },
                {
                  scale: true,
                  gridIndex: 1,
                  splitNumber: 2,
                  axisLabel: {show: false},
                  axisLine: {show: false},
                  axisTick: {show: false},
                  splitLine: {show: false}
                }
              ],
              dataZoom: [
                {
                  type: 'inside',
                  xAxisIndex: [0, 1],
                  start: 98,
                  end: 100
                },
                {
                  show: true,
                  xAxisIndex: [0, 1],
                  type: 'slider',
                  top: '85%',
                  start: 98,
                  end: 100
                }
              ],
              series: [
                {
                  // name: 'Dow-Jones index',
                  type: 'candlestick',
                  data: data.values,
                  itemStyle: {
                    color: upColor,
                    color0: downColor,
                    borderColor: undefined,
                    borderColor0: undefined
                  }
                }
              //     tooltip: {
              //       formatter: function (param) {
              //         param = param[0];
              //         return [
              //           'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
              //           'Open: ' + param.data[0] + '<br/>',
              //           'Close: ' + param.data[1] + '<br/>',
              //           'Lowest: ' + param.data[2] + '<br/>',
              //           'Highest: ' + param.data[3] + '<br/>'
              //         ].join('');
              //       }
              //     }
              //   },
              //   // {
              //   //   name: 'MA5',
              //   //   type: 'line',
              //   //   data: calculateMA(5, data),
              //   //   smooth: true,
              //   //   lineStyle: {
              //   //     opacity: 0.5
              //   //   }
              //   // },
              //   // {
              //   //   name: 'MA10',
              //   //   type: 'line',
              //   //   data: calculateMA(10, data),
              //   //   smooth: true,
              //   //   lineStyle: {
              //   //     opacity: 0.5
              //   //   }
              //   // },
              //   // {
              //   //   name: 'MA20',
              //   //   type: 'line',
              //   //   data: calculateMA(20, data),
              //   //   smooth: true,
              //   //   lineStyle: {
              //   //     opacity: 0.5
              //   //   }
              //   // },
              //   // {
              //   //   name: 'MA30',
              //   //   type: 'line',
              //   //   data: calculateMA(30, data),
              //   //   smooth: true,
              //   //   lineStyle: {
              //   //     opacity: 0.5
              //   //   }
              //   // },
              //   // {
              //   //   name: '开',
              //   //   type: 'bar',
              //   //   xAxisIndex: 1,
              //   //   yAxisIndex: 1,
              //   //   data: data.volumes
              //   // }
              ]
            }),
            true
          );
          myChart.dispatchAction({
            type: 'brush',
            areas: [
              {
                brushType: 'lineX',
                coordRange: ['201-12-15 ', '201-12-15'],
                xAxisIndex: 0
              }
            ]
          });
        });

        option && chartDom.setOption(option);

      }
    }
  }

</script>

<style scoped>

</style>
